import {Button, Input, Image} from 'antd'
import React,{useState, useRef} from 'react'
import {PlusOutlined} from '@ant-design/icons'
import {addBannerFn} from '../../api/banner'
const Add = () => {

  // 创建一个 ref 属性
  const fileRef = useRef()

  const [imgUrl,setImgUrl] = useState()
  const [link,setLink] = useState()
  const [alt,setAlt] = useState()

  function changeImage(e){
    // 获取选中之后的文件
    // console.log(e.target.files[0]);
    
    // 1. 通过选择的文件，创建一个零时的图片地址
    // console.log(URL.createObjectURL(e.target.files[0]));
    // setImgUrl(URL.createObjectURL(e.target.files[0]))

    // 2. 创建一个文件加载器
    const reader = new FileReader()
    // 使用文件加载器读取文件
    reader.readAsDataURL(e.target.files[0])
    // 文件读取成功后的回调函数
    reader.onload = ()=>{
      // 保存 base64 图片
      setImgUrl(reader.result)
    }

  }

  function add(){
    // console.log(link, alt, imgUrl);
    // 上传图片在企业中的流程
    // 1. 先获取到选择的图片
    // 2. 将图片直接上传到文件服务器中
    // 3. 文件服务器会给你返回一个 url 地址
    // 4. 将 url 地址传递给后端

    // 上传图片
    addBannerFn({
      link, 
      alt, 
      img: imgUrl
    }).then(res => {
      // console.log(res);
      if(res.code === '200'){
        setAlt('')
        setLink('')
        setImgUrl('')
      }else {

      }
    })
  }


  return (
    <div>
      <h1>添加轮播图</h1>

      <Input value={link} onChange={e => setLink(e.target.value)} placeholder='请输入 link' />
      <Input value={alt} onChange={e => setAlt(e.target.value)} placeholder='请输入 alt' />
      
      <input ref={fileRef} type='file' hidden onChange={changeImage} />
      <br />
      <br />

      <Button onClick={()=>{
        fileRef.current.click()
      }} type="primary" shape="round" icon={<PlusOutlined />}>
        请选择文件
      </Button>

      <br />
      <br />
      <Image height={100} src={imgUrl} />
      <br />
      <Button onClick={add}>添加</Button>
    </div>
  )
}

export default Add